<template>
	<view class="body">
		<view v-for="item in platformList" :key="item.id" class="section" @click="toPlatform(item)">
			<view class="circle">
				<img :src="item.src" class="icon" alt=""/>
			</view>
			<text class="bottom-text">{{ item.name }}</text>
		</view>
	</view>
</template>


<script setup>
// JS部分根据需要添加

import sheep from "@/sheep";

const props = defineProps({
	platformList: {
		type: Array,
		default() {
		},
	},
});

function toPlatform(item) {
	/*if (item.type === 0 || item.type === 1) {
		// 煤炉
		sheep.$router.go('/pages/goods/list', { platform: item.type })
	} else if (item.type === -999) {
		// 外部链接
		sheep.$router.go('/pages/order/addOrder')
	} else {
		// sheep.$helper.toast('平台对接中，敬请期待~')
	}*/
	sheep.$router.go('/pages/coupon/detail', {
		id: item.type
	})
}

</script>

<style lang="scss" scoped>
.body {
	display: flex;
	flex-wrap: wrap; /* 允许内容换行 */
	justify-content: center; /* 居中显示元素 */
	align-items: center;
	background-color: #ffffff !important;
	width: 95%;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	padding-left: 2.5%;
	gap: 2rem;
}

.section {
	display: flex;
	justify-content: center; /* 居中显示图标和文字 */
	align-items: center;
	flex-direction: column;
	flex: 1; /* 允许每个section根据其内容自动调整大小 */
	margin: 5rpx; /* 为section之间提供一些间隔 */

	.bottom-text {
		font-size: 20rpx;
		margin-top: 10rpx;
	}
}

.circle {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(250, 222, 222, 0.50);
	border-radius: 3rem;
}

.icon {
	width: 3rem;
	height: 3rem;
}
</style>


